import React, { Component } from "react";
import { splb } from "./server";
import { Table, Button, Popconfirm, Card } from "antd";
// import ProTable from "@ant-design/pro-table";

class Video extends Component {
  state = {
    columns:[{
      title:"BVid",
      dataIndex:"_id"
    },
    {
      title:"作者",
      dataIndex:"userName",
    },
  ],
    arr: [],
    dataSource: [
      {
        key: "1",
        id: "BV1gD4y1k7Zp",
        title: "利用物理bug来缩短通勤时间 | 生活小窍门",
        author: "觅2",
        description:
          "今天分享的是一个节省通勤时间的一些生活小窍门，让大家晚上有多一些时间在家熬夜打游戏\n\n对了，记得把掉落伤害调为0",
        create: "2022-10-26 16:40",
        duration: "1:05",
        pic: "http://i0.hdslb.com/bfs/archive/0ea1a98e1b28e6a241fff82ecb67b74f6c933c34.jpg",
        qwe:"11",
      },
    ],
  };
  columns = [
    {
      title: "BVid",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "作者",
      dataIndex: "author",
      key: "author",
    },
    {
      title: "简介",
      dataIndex: "description",
      key: "description",
    },
    {
      title: "上传时间",
      dataIndex: "create",
      key: "create",
    },
    {
      title: "播放时长",
      dataIndex: "duration",
      key: "duration",
    },
    {
      title: "视频封面",
      dataIndex: "pic",
      key: "pic",
    },
    {
      title: "操作",
      render(...arg){
        console.log(arg);
        return (
        <>
        <Popconfirm
        title="你确定要删除吗？"
        okText="确定"
        cancelText="取消"
        onConfirm={()=>{
            console.log("我要删除数据");
        }}
        >
        <Button size="small" type="danger">删除</Button>
        </Popconfirm>
        <Popconfirm
        title="你确定要更新吗？"
        okText="确定"
        cancelText="取消"
        onConfirm={()=>{
            console.log("我要更新数据");
        }}
        >
        <Button size="small" type="loading">更新</Button>
        </Popconfirm>
        </>
        )
      }
      },
  ];
  async q1() {
    let { data } = await splb();
    // console.log(data);
    data.forEach((item) => {
      this.state.arr.push({
        key: item.key,
        id: item.bvid,
        title: item.title,
        author: item.author,
        description: item.description,
        create: item.create,
        duration: item.duration,
        pic: item.pic,
      });
    //   console.log(item);
    });
    this.setState({ dataSource: this.state.arr });
  }
  render() {
    let { dataSource } = this.state;
    return (
      <Card>
        <h1>视频管理</h1>
        {/* <ProTable 
        columns={columns}
        // dataSource={[]}
        /> */}
        <Table
          dataSource={dataSource}
          columns={this.columns}
          pagination={{defaultPageSize:5}}
        />
        ;
      </Card>
    );
  }
  componentDidMount() {
    this.q1();
  }
}

export default Video;
